<template>
  <div>
      <header class="head">
          <router-link to="/jlcy" tag="span" class="s"><返回</router-link>
          <p>登录</p>
      </header>
      <div class="dl">
          <span>用户名:</span>
          <input type="text">
      </div>
      <div class="mm">
          <span>密码:</span>
          <input type="text">
      </div>
      <div class="jz">
          <input type="checkbox" class="ipt">
          <span>记住密码</span>
      </div>
      <div class="d">
          <button class="btn">登录</button>
          <button class="zz">注册</button>
      </div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style lang="less" scoped>
    .px2rem(@name, @px) {
        @{name}: @px / 75 * 1rem;
    }
.head{
    position: relative;
    width: 100%;
    .px2rem(height,50);
    background: red;
    display: flex;
    // justify-content: center;
    p{ 
       width: 100%;
        text-align: center;
        .px2rem(font-size, 30);
        color: #fff;
        font-family: '楷体';
        line-height: 1.8;
    }
    span{
        position: absolute;
        top: 0;
        left: 0;
        .px2rem(width, 100);
        .px2rem(height, 50);
        .px2rem(font-size, 20);
        text-align: center;
        line-height: 2.6;
    }
}
.dl{
    display: flex;
    margin-top: 30px;
    justify-content: center;
    span{
        .px2rem(font-size, 20);
        margin-top: 4px;
        margin-right: 6px;
    }
}
.mm{
    display: flex;
    margin-top: 30px;
    justify-content: center;
    span{
        .px2rem(font-size, 20);
        margin-top: 4px;
        margin-right: 6px;
    }
}
.jz{
    display: flex;
    justify-content: center;
    margin-top: 25px;
    padding-left: 200px;
    span{
        margin-top: 4px;
    }
}
.d{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    .btn{
        .px2rem(width, 90);
        .px2rem(height, 40);
        margin-right: 20px;
        background: green;
        border-radius: 10px;
        border: none;
    }
     .zz{
        .px2rem(width, 90);
        .px2rem(height, 40);
        background: skyblue;
        border-radius: 10px;
        border: none;
    }
}
</style>
